<p-messages [(value)]="msgs" [enableService]="false"></p-messages>
<app-dia-breadcrumbs></app-dia-breadcrumbs>

<div class="align-items-center justify-content-center pl-8 pr-8 pt-2 pb-2">
  <p-card header="Новый курс" class="max-w-full">
    <form (ngSubmit)="onSubmit()" [formGroup]="addNewCourseForm">
      <div>
        <span class="p-float-label flex">
          <input
            pInputText
            id="courseName"
            name="courseName"
            type="text"
            formControlName="courseName"
            class="form-control"
            class="p-inputtext-lg"
            [style]="{ width: '810px' }"
          />

          <label htmlFor="courseName">Наименование*</label>
        </span>
      </div>
      <div *ngIf="courseName?.invalid && courseName.touched" style="color: red">
        Минимальная длина поля 5 максимальная длина 50 символов
      </div>

      <p class="pt-1"></p>

      <div>
        <span class="p-float-label flex">
          <textarea
            pInputText
            id="courseDescription"
            name="courseDescription"
            type="text"
            formControlName="courseDescription"
            class="form-control"
            class="p-inputtext-lg"
            [style]="{ width: '810px' }"
          ></textarea>

          <label htmlFor="courseDescription">Описание*</label>
        </span>
      </div>

      <div
        *ngIf="courseDescription?.invalid && courseDescription.touched"
        style="color: red"
      >
        Минимальная длина поля 5 максимальная длина 500 символов
      </div>

      <p class="pt-1"></p>

      <div>
        <span class="p-float-label flex">
          <p-inputNumber
            styleClass="input-styling"
            id="courseDurationInMinutes"
            name="courseDurationInMinutes"
            formControlName="courseDurationInMinutes"
            mode="decimal"
            [showButtons]="true"
            inputId="minmax-buttons"
            [min]="10"
            [max]="300"
          >
          </p-inputNumber>

          <label htmlFor="courseDescription">Продолжительность*</label>

          <span *ngIf="this.addNewCourseForm.value.courseDurationInMinutes">
            <span>
              {{
                this.addNewCourseForm.value.courseDurationInMinutes | duration
              }}</span
            >
          </span>
        </span>
      </div>

      <div
        *ngIf="
          courseDurationInMinutes?.errors?.['pattern'] && courseDurationInMinutes.touched
        "
        style="color: red"
      >
        Допускаются только числа!
      </div>

      <p class="pt-1"></p>

      <div>
        <span class="p-float-label flex">
          <p-calendar
            styleClass="input-styling"
            [showIcon]="true"
            id="courseCreationDate"
            name="courseCreationDate"
            formControlName="courseCreationDate"
          ></p-calendar>
          <label htmlFor="courseCreationDate">Дата*</label>
        </span>
      </div>

      <p class="pt-1"></p>

      <span class="p-float-label flex">
        <p-autoComplete
          [style]="{ width: '62%' }"
          id="courseAuthors"
          name="courseAuthors"
          formControlName="selectedAuthors"
          [suggestions]="filteredAuthors"
          (completeMethod)="filterAuthors($event)"
          field="name"
          [multiple]="true"
          styleClass="input-styling"
        >
        </p-autoComplete>
      </span>

      <p class="pt-1"></p>

      <div>
        <span class="flex align-items-center justify-content-start">
          <a routerLink="/"
            ><p-button label="Вернуться" styleClass="p-button-text"></p-button
          ></a>

          <p-button type="submit" [disabled]="addNewCourseForm.invalid"
            >Сохранить</p-button
          >
        </span>
      </div>
    </form>
  </p-card>
</div>
